<template>
    <div class="card">
        <div class="wrapper">
            <img :src="setImg(name || '白羊座')" :alt="name" />
            <div class="mask">
                <span>{{ name || '白羊座' }}</span>
                <p v-if="allIndex">综合指数： {{ allIndex || 0 }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import { watch, watchEffect, onMounted, onActivated } from 'vue';
import { getImg } from './getImg.js';

export default {
    name: 'ConsCard',
    props: {
        name: String,
        allIndex: String | Number
    },
    setup (props) {
        const setImg = getImg;
        return { setImg };
    }
}
</script>

<style lang='scss'>
.card {
    padding: .1rem;
    box-sizing: border-box;

    .wrapper {
        position: relative;
        border-radius: 5px;
        overflow: hidden;

        img {
            width: 100%;
            vertical-align: bottom;
        }

        .mask {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            span {
                color: #ffd7f5;
                font-size: .48rem;
                // font-weight: none;
                // line-height: .2em;
            }

            p {
                font-size: .16rem;
                color: #ffffff;
            }
        }
    }
}
</style>
